<template>
	<view style="padding: 10rpx;width: 100%;height: 100vh;overflow-y: auto;overflow-x: hidden;">
		<view style="height: 11px"></view>
		<view class="frequency-box">
			<view class="frequency-item " :class="item.checked?'active':'noactive'" v-for="(item,index) in tab"
				:key="index" @click="checktab(item,index)">
				{{item.name}}
			</view>
		</view>
		<!-- 	<view class="" v-if="tabname == '新澳門六合彩'">
			<view class="xianlubox">
				<view class="xianname">直播線路切換:</view>
				<view :class="item.checked?'ckxl':'nockxl'" v-for="(item,index) in xianlu" :key="index"
					@click="checkxianlu(item,index)">{{item.name}}
				</view>
			</view>
			<view class="">
				<sy-new-jessibuca isTabbar @load='load' @timeout="liveError"
					background='url(./uni_modules/sy-new-jessibuca/static/img/bg2.png)' ref="jessibuca"
					:decoder='decoder' isAuto :url='liveurl'></sy-new-jessibuca>
			</view>
		</view> -->
		<!-- <image src="" mode=""></image> -->

		<!-- <view class="xianlubox" v-if="tabname == '澳門六合彩'">
			<view class="xianname">直播線路切換:</view>
			<view class="ckxl">
				線路一
			</view>
		</view>
		<view class="" v-if="tabname == '澳門六合彩'">
			<sy-new-jessibuca isTabbar @load='load' ref="jessibuca"
				background='url(./uni_modules/sy-new-jessibuca/static/img/bg1.png)' :decoder='decoder' isAuto
				url='https://live-macaujc.com/live/livestream/macaujc2230.flv'></sy-new-jessibuca>
		</view> -->
		<!-- <view style="height:40rpx"></view> -->
		<!-- <view class="videoclas">
			<view class="txt">
				<view class="novideotxt">{{tabname}}</view>
				<view class="novideotxt">攪珠直播時間為每晚</view>
				<view class="novideotxt222">{{tabname=='新澳門六合彩'?'21:30-21:3':'22:30-22:38'}}8</view>
				<view class="novideotxt">敬請查看。</view>
			</view>
		</view> -->
		<!-- <view class="lines"></view> -->
		<view class="kaiajignbox">
			<view class="kjboxtxt">第</view>
			<view class="kjnum">{{list[0].expect}}</view>
			<view class="kjboxtxt">期開獎號碼</view>
		</view>

		<view style="height:10rpx"></view>
		<view style="position: relative; overflow: hidden;">
			<view class="open_code_zone_left-content">
				<view class="open_code_zone_left-item" v-for="(item,index) of list[0].opencode.split(',').slice(0, 6)"
					:key="index">
					<view class="open_code_zone_left-item-number" :style="judgingStyle(list[0].wave.split(',')[index])">
						{{item}}
					</view>
					<view class="open_code_zone_left-item-zodiac">{{list[0].zodiac.split(',')[index]}}</view>
				</view>

				<view class="open_code_zone_left-item">
					<view class="open_code_zone_left-item-plus">+</view>
					<!-- <view class="open_code_zone_left-item-zodiac"><text style="opacity: 0;">澳</text></view> -->
				</view>
				<view class="open_code_zone_left-item">
					<view class="open_code_zone_left-item-number"
						:style="judgingStyle(list[0].wave.split(',')[list[0].wave.split(',').length-1])">
						{{list[0].opencode.split(',')[list[0].opencode.split(',').length-1]}}
					</view>
					<view class="open_code_zone_left-item-zodiac">
						{{list[0].zodiac.split(',')[list[0].zodiac.split(',').length-1]}}
					</view>
				</view>
			</view>
		</view>
		<view class="lines"></view>
		<view class="" v-if="tabname == '新澳門六合彩'">
			<view class="jzsj"> 下期截止時間: <text
					style="color:rgb(216, 0, 17);">{{nowday}}{{tabname=='新澳門六合彩'?' 21:32':'  22:32'}}</text></view>
			<view class="shijian">
				<view :class="item != ':'?'shijianitem':'shijianitem22'" v-for="(item,index) in timeString">{{item}}
				</view>
			</view>
		</view>
		<view class="" v-if="tabname == '澳門六合彩'">
			<view class="jzsj"> 下期截止時間: <text>{{nowday}}{{tabname=='新澳門六合彩'?' 21:32':'  22:32'}}</text></view>
			<view class="shijian">
				<view :class="item != ':'?'shijianitem':'shijianitem22'" v-for="(item,index) in timeString2">{{item}}
				</view>
			</view>
		</view>
		<view class="videobox">
			<view class="videoboxitem" v-for="(item,index) in list" v-if="list.length>1" :key="index"
				@click="checkvideo(item,index)">
				<view class="bgimg">
					<image v-if="tabname == '新澳門六合彩'" src="../../static/beijn.png" class="" mode=""></image>
					<image v-else src="../../static/oldam.png" class="" mode=""></image>
					<image src="../../static/bofang.png" class="playimag" mode=""></image>
				</view>
				<view class="xtxline">
					<view class="tabbaenamesty">{{tabname}}</view>
					<view class="tabbaenamesty">第</view>
					<view class="tabbaenamesty" style="color: #ff6f27;">{{item.expect}}</view>
					<view class="tabbaenamesty">開獎視頻</view>
				</view>
			</view>
			<view class="history_list_loading" v-if="list.length<=1" style="height: 115px;">
				<u-loading-icon mode="semicircle" style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;"
					color="#3b5aa5" show></u-loading-icon>
			</view>
			<!-- 視頻 -->
			<view class="allpage">
				<image src="../../static/closevideo.png" mode="" class="digbuchagb"></image>
				<view class="vdobox">
				</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<u-popup :show="videoShow" bgColor="" :round="10" mode="center">
			<view class="mask">
				<view class="mask-inner">
					<view class="mask-title">
						<view class="mask-title-l">
							<view>{{tabname}}</view>
							<view class="huifang">回放</view>
						</view>
						<view class="mask-title-r">
							<view>
								<span>第</span>
								<span style="padding: 0px 2px; color: rgb(26, 61, 150);">{{selobj.expect}}</span>
								<span>期</span>
								<span style="padding-left: 0.213rem;">2024-08-30 21:32:32</span>
							</view>

							<view class="open_code_zone_left-content" v-if="selobj">
								<view class="open_code_zone_left-item"
									v-for="(item,index) of selobj.opencode.split(',').slice(0, 6)" :key="index">
									<view class="open_code_zone_left-item-number"
										:style="judgingStyle(selobj.wave.split(',')[index],true)">
										{{item}}
									</view>
									<view class="open_code_zone_left-item-zodiac">{{selobj.zodiac.split(',')[index]}}
									</view>
								</view>
								<view class="open_code_zone_left-item">
									<view class="open_code_zone_left-item-plus2">+</view>
									<!-- <view class="open_code_zone_left-item-zodiac"><text style="opacity: 0;">澳</text></view> -->
								</view>
								<view class="open_code_zone_left-item">
									<view class="open_code_zone_left-item-number"
										:style="judgingStyle(selobj.wave.split(',')[selobj.wave.split(',').length-1],true)">
										{{selobj.opencode.split(',')[selobj.opencode.split(',').length-1]}}
									</view>
									<view class="open_code_zone_left-item-zodiac">
										{{selobj.zodiac.split(',')[selobj.zodiac.split(',').length-1]}}
									</view>
								</view>
							</view>

						</view>
					</view>
					<view class="video-box">
						<!-- 	<video controls="" autoplay="" id="mui-player"
							src="https://macaujc.com/video2/2024243.mp4"></video> -->
						<video class="playvideo" controls autoplay :src="selobj.videoUrl"></video>

					</view>
				</view>
				<view class="close" @click="guanbivideo">
					<svg t="1717575175018" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="4269" width="32" height="32">
						<path
							d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"
							fill="#ffffff" p-id="4270"></path>
					</svg>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		methods
	} from "../../uni_modules/uview-ui/libs/mixin/mixin"
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex'
	import {
		getlivelist,
		getlivedata,
		getliveshow,
		getliveshowdata,
		getXAMHistory,
		getAMHistory,
	} from '@/api/user.js'
	export default {
		data() {
			return {
				decoder: process.env.NODE_ENV === 'development' ? '' : 'jessibuca/',
				windows: {
					width: '100%',
					height: '400rpx',
				},
				indexvideoUrl: 'https://vod.cctywlkj.com',
				tab: [{
						name: '新澳門六合彩',
						value: 1,
						checked: true,
						videoUrl: 'https://vod.cctywlkj.com'
					},
					{
						name: '澳門六合彩',
						value: 2,
						checked: false,
						videoUrl: 'https://video2m6-qq.dldydn.com'
					}
				],
				tabname: '新澳門六合彩',
				xianlu: [{
						name: '綫路一',
						value: 1,
						checked: true,
						url: 'https://play666.macau-lhc.live/live/mosixmark.flv'
					},
					{
						name: '綫路二',
						value: 2,
						checked: false,
						url: 'https://play888.00853lhc.live/live/mosixmark.flv',
					},
					{
						name: '綫路三',
						value: 3,
						checked: false,
						url: 'https://live-macaujc.com/live/livestream/new.flv'
					},
				],
				liveurl: 'https://play666.macau-lhc.live/live/mosixmark.flv',
				videoShow: false,
				selobj: {
					"expect": null,
					"opencode": "正,在,进,行,搅,珠,中",
					"zodiac": "",
					"openTime": "",
					"wave": "#cccccc,#cccccc,#cccccc,#cccccc,#cccccc,#cccccc,#cccccc",
					"info": "數據來源macaujc.com"
				},
				list: [{
					"expect": null,
					"opencode": "正,在,进,行,搅,珠,中",
					"zodiac": "",
					"openTime": "",
					"wave": "#cccccc,#cccccc,#cccccc,#cccccc,#cccccc,#cccccc,#cccccc",
					"info": "數據來源macaujc.com"
				}],
				livetime: {
					"expect": null,
					"opencode": "正,在,进,行,搅,珠,中",
					"zodiac": "",
					"openTime": "",
					"wave": "#cccccc,#cccccc,#cccccc,#cccccc,#cccccc,#cccccc,#cccccc",
					"info": "數據來源macaujc.com"
				},
				showstyle: 1,
				targetTime: '21:24:00', // 目标时间
				timeLeft: 0, // 剩余时间（秒）
				timeString: '00:00:00', // 拼接后的时间字符串
				nowday: '',
				targetTime2: '22:24:00', // 目标时间
				timeLeft2: 0, // 剩余时间（秒）
				timeString2: '00:00:00', // 拼接后的时间字符串
			}

		},
		mounted() {
			this.getlist()
			this.getlivetime()
			this.setTargetTime(); // 初始化目标时间
			this.startCountdown(); // 开始倒计时
			this.setTargetTime2(); // 初始化目标时间
			this.startCountdown2(); // 开始倒计时
			this.gettoday()
			// this.live()
		},
		computed: {
			...mapState(['winningStyle']),
			...mapGetters(['judgingStyle'])
		},
		methods: {
			...mapActions(['changeWinningStyle']),
			checktab(e, i) {
				console.log(e, i);
				this.indexvideoUrl = e.videoUrl
				this.list = [{
					"expect": null,
					"opencode": "正,在,进,行,搅,珠,中",
					"zodiac": "",
					"openTime": "",
					"wave": "#cccccc,#cccccc,#cccccc,#cccccc,#cccccc,#cccccc,#cccccc",
					"info": "數據來源macaujc.com"
				}]
				this.tab.forEach(item => {
					if (e.value == item.value) {
						item.checked = true
					} else {
						item.checked = false
					}
				})
				this.tabname = e.name

				if (e.name == '新澳門六合彩') {
					// this.getlivetime()
					this.getlist()
				} else if (e.name == '澳門六合彩') {
					// this.getlivedatatime()
					this.getlist222()
				}
			},

			checkxianlu(e, i) {
				console.log(e, i);
				this.xianlu.forEach(item => {
					if (e.value == item.value) {
						item.checked = true
					} else {
						item.checked = false
					}
				})
				this.liveurl = e.url
				this.initJessibuca()
			},
			checkvideo(e, i) {
				console.log(e, i);
				e.videoUrl = this.indexvideoUrl + e.videoUrl
				this.videoShow = true
				this.selobj = e
			},
			guanbivideo() {
				this.videoShow = false
			},
			async getlist() {
				let data = {
					date: 2024
				}
				let res = await getXAMHistory({})
				console.log(res, "dddsadsad");
				this.list = []
				this.list = res.data.map(i => this.codeArrinfo(i))
				this.selobj = res.data[0]
			},
			codeArrinfo(arr) {
				let opencodeArray = arr.opencode.split(/\s*,\s*/).map(Number);
				arr.zodiac = [];
				arr.wave = [];
				opencodeArray.forEach(item => {
					let ballInfo = this.$store.getters.getBallInfo(item);
					if (ballInfo) {
						arr.zodiac.push(ballInfo.zodiac);
						arr.wave.push(ballInfo.wave);
					}
				});
				arr.opencode = opencodeArray.join(',');
				arr.zodiac = arr.zodiac.join(',');
				arr.wave = arr.wave.join(',');
				arr.expect = arr.issue;
				return arr;
			},
			async getlist222() {
				let data = {
					date: 2024
				}
				let res = await getAMHistory({})
				console.log(res);
				this.list = []
				this.list = res.data.map(i => this.codeArrinfo(i))
				this.selobj = res.data[0]
			},
			async getlivetime() {
				// let data = {
				// 	time: Date.now()
				// }
				// let res = await getliveshow({
				// 	data
				// })
				// console.log(res, 'res');
				// this.livetime = res[0]
			},

			async getlivedatatime() {
				// let data = {
				// 	time: Date.now()
				// }
				// let res = await getliveshowdata({
				// 	data
				// })
				// console.log(res, 'res');
				// this.livetime = res[0]
			},
			qiehuanfengge() {
				console.log('切換風格');
				this.showstyle = this.showstyle == 1 ? 2 : this.showstyle == 2 ? 1 : 1
				console.log(this.showstyle);
			},


			setTargetTime() {
				const now = new Date();
				const [targetHour, targetMinute, targetSecond] = this.targetTime.split(':').map(Number);

				// 创建目标时间（可能是今天或明天）
				let targetTime = new Date(
					now.getFullYear(),
					now.getMonth(),
					now.getDate(),
					targetHour,
					targetMinute,
					targetSecond
				);

				// 如果目标时间在当前时间之前，设定为明天
				if (targetTime <= now) {
					targetTime.setDate(now.getDate() + 1);
				}

				// 计算剩余时间（以秒为单位）
				this.timeLeft = Math.floor((targetTime - now) / 1000);

				// 更新拼接后的时间字符串
				this.updateTimeString();
			},
			startCountdown() {
				// 初始化目标时间
				this.setTargetTime();

				// 启动倒计时
				const countdownInterval = setInterval(() => {
					if (this.timeLeft > 0) {
						this.timeLeft--;
						// 更新拼接的时间字符串
						this.updateTimeString();
					} else {
						// 倒计时结束，重新设定目标时间并重新开始倒计时
						// this.initJessibuca()
						// this.setTargetTime();
						clearInterval(countdownInterval);
						this.startAdditionalCountdown(10 * 60); // 启动30分钟倒计时
					}
				}, 1000);

				// 保存 interval 的引用，方便在需要时清除
				this.carouselInterval = countdownInterval;
			},
			startAdditionalCountdown(duration) {
				this.timeLeft = duration;
				const additionalCountdownInterval = setInterval(() => {
					if (this.timeLeft > 0) {
						this.timeLeft--;
						// 更新拼接的时间字符串
						this.updateTimeString();
						this.getlivetime()
						this.timeString = '00:00:00'; // 倒计时未结束前显示 00:00:00
					} else {
						clearInterval(additionalCountdownInterval);
						this.initJessibuca()
						this.startCountdown(); // 倒计时结束后，重新开始原来的倒计时
					}
				}, 1000);
			},
			updateTimeString() {
				const hours = String(Math.floor(this.timeLeft / 3600)).padStart(2, '0');
				const minutes = String(Math.floor((this.timeLeft2 % 3600) / 60)).padStart(2, '0');
				const seconds = String(this.timeLeft % 60).padStart(2, '0');

				// 拼接时分秒为一个字符串
				this.timeString = `${hours}:${minutes}:${seconds}`;
			},


			gettoday() {
				// 获取今天的日期
				const today = new Date();

				// 获取年、月、日
				const year = today.getFullYear();
				const month = (today.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以要加1
				const day = today.getDate().toString().padStart(2, '0');

				// 格式化成 yyyy-mm-dd
				const formattedToday = `${year}-${month}-${day}`;

				console.log(formattedToday); // 输出: yyyy-mm-dd 格式的今天日期
				this.nowday = formattedToday
			},

			setTargetTime2() {
				const now = new Date();
				const [targetHour, targetMinute, targetSecond] = this.targetTime2.split(':').map(Number);

				// 创建目标时间（可能是今天或明天）
				let targetTime = new Date(
					now.getFullYear(),
					now.getMonth(),
					now.getDate(),
					targetHour,
					targetMinute,
					targetSecond
				);

				// 如果目标时间在当前时间之前，设定为明天
				if (targetTime <= now) {
					targetTime.setDate(now.getDate() + 1);
				}

				// 计算剩余时间（以秒为单位）
				this.timeLeft2 = Math.floor((targetTime - now) / 1000);

				// 更新拼接后的时间字符串
				this.updateTimeString2();
			},
			startCountdown2() {
				// 初始化目标时间
				this.setTargetTime2();

				// 启动倒计时
				const countdownInterval = setInterval(() => {
					if (this.timeLeft2 > 0) {
						this.timeLeft2--;
						// 更新拼接的时间字符串
						this.updateTimeString2();
					} else {
						// 倒计时结束，重新设定目标时间并重新开始倒计时
						// this.initJessibuca()
						// this.setTargetTime2();
						clearInterval(countdownInterval);
						this.startAdditionalCountdown2(10 * 60); // 启动30分钟倒计时
					}
				}, 1000);

				// 保存 interval 的引用，方便在需要时清除
				this.carouselInterval2 = countdownInterval;
			},
			startAdditionalCountdown2(duration) {
				this.timeLeft2 = duration;


				const additionalCountdownInterval = setInterval(() => {
					if (this.timeLeft2 > 0) {
						this.timeLeft2--;
						// 更新拼接的时间字符串
						this.updateTimeString2();
						this.getlivedatatime()
						this.timeString2 = '00:00:00'; // 倒计时未结束前显示 00:00:00
					} else {
						clearInterval(additionalCountdownInterval);
						this.initJessibuca()
						this.startCountdown2(); // 倒计时结束后，重新开始原来的倒计时
					}
				}, 1000);
			},
			updateTimeString2() {
				const hours = String(Math.floor(this.timeLeft2 / 3600)).padStart(2, '0');
				const minutes = String(Math.floor((this.timeLeft2 % 3600) / 60)).padStart(2, '0');
				const seconds = String(this.timeLeft2 % 60).padStart(2, '0');

				// 拼接时分秒为一个字符串
				this.timeString2 = `${hours}:${minutes}:${seconds}`;
			},
			live() {
				uni.request({
					url: 'https://live-macaujc.com/live/livestream/new.m3u8',
					method: 'GET',
					success: (res) => {
						console.log(res.data);
					}
				});

			},
			load() {
				console.log(this.$refs['jessibuca'])
				console.log('23333333333333333333333333');
			},
			initJessibuca() {
				// 访问 sy-new-jessibuca 组件的实例
				const jessibucaComponent = this.$refs['jessibuca'];

				if (jessibucaComponent && jessibucaComponent.create) {
					// 手动初始化 Jessibuca
					jessibucaComponent.create();

					// 如果需要在初始化后立即播放视频，可以调用 play 方法
					jessibucaComponent.play();
				} else {
					console.error('sy-new-jessibuca 组件实例不存在或 create 方法未定义');
				}
			},
			liveError(e) {
				console.log('超时', e);
				this.outtime = true
			},
		},
	}
</script>

<style lang="scss" scoped>
	.page-mobile {
		height: 100%;
		box-sizing: border-box;
		width: 100%;

	}

	.logo-image {
		width: 90px;
		height: 20px;
	}

	.switch_style {
		// width: 180rpx;
		// height:60rpx;
		display: inline-block;
		font-style: normal;
		border-radius: 3px;
		padding: 1.2px 2.5px;
		color: #fff;
		background: #1a3d96;
		font-size: 15px;
		text-align: center;
		line-height: 60rpx;
		cursor: pointer;
	}

	.frequency-box {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		padding: 0 2.57px;
		justify-content: space-between;
	}

	.frequency-item {
		color: #000;
		background-color: #ded9d9;
		font-weight: bolder;
		font-size: 17px;
		padding: 7px;
		margin-right: 7px;
		cursor: pointer;
	}

	.active {
		width: 40%;
		color: #333 !important;
		background: #fff;
		border-bottom: 1px solid black;
		text-align: center;
	}

	.noactive {
		width: 40%;
		color: #333 !important;
		background: #fff;
		text-align: center;
	}

	.xianlubox {
		display: flex;
		align-items: center;
	}

	.xianname {
		font-size: 26rpx;
	}

	.ckxl {
		width: 20%;
		font-size: 26rpx;
		text-align: center;
		background-color: #1a3d96;
		border-radius: 40rpx;
		padding: 6rpx 20rpx;
		margin-left: 10rpx;
		color: #fff;
	}

	.nockxl {
		width: 20%;
		font-size: 26rpx;
		text-align: center;
		background-color: #ddd;
		border-radius: 40rpx;
		padding: 6rpx 20rpx;
		margin-left: 10rpx;
	}

	.kaiajignbox {
		display: flex;
		align-items: center;
	}

	.kjboxtxt {
		font-size: 24rpx;
	}

	.kjnum {
		font-size: 24rpx;
		color: rgb(216, 0, 17);
	}

	.open_code_zone_left-content {
		display: flex;
		justify-content: space-between;
		padding: 2px 0px;

		.open_code_zone_left-item {
			margin-right: 2rpx;

			.open_code_zone_left-item-plus {
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 18px;
				color: #da0f1f;
				font-weight: bolder;
				// margin-top: -20rpx;
			}

			.open_code_zone_left-item-zodiac {
				font-size: 17px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 700;
			}

			.open_code_zone_left-item-number {
				width: 1.2rem;
				height: 1.2rem;
				background-color: #ccc;
				font-size: 27px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #000;
				text-align: center;
				line-height: 1.2rem;
				font-family: PingFangSC-Regular, Microsoft YaHei, Helvetica, sans-serif !important;
			}
		}
	}

	.open_code_zone_left-item-plus2 {
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		color: #da0f1f;
		font-weight: bolder;
		margin-top: -20rpx;
	}

	.videobox {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-around;

		.history_list_loading {
			position: relative;
			width: 100%;
			// height: 100px;
			// margin-top: 50px;
		}
	}

	.videoboxitem {
		margin: 20rpx 0;
	}

	.bgimg {
		width: 340rpx;
		height: 200rpx;
		border: 1px solid black;
		position: relative;
	}

	.playimag {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto
	}

	.xtxline {
		display: flex;
		align-items: baseline;
	}

	.tabbaenamesty {
		font-size: 21rpx;
		color: #414141;
	}

	.mask {
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		// background-color: rgba(0, 0, 0, .5);

		.mask-inner {
			width: 100%;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			background-color: #fff;
			z-index: 1000;

			.mask-title {
				padding: .213rem;
				padding-bottom: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.mask-title-r {
					font-size: 26rpx;
					color: #000;
					font-weight: 700;

					.open_code_zone_left-content {
						display: flex;
						justify-content: space-between;
						width: 100%;

						.open_code_zone_left-item {
							.open_code_zone_left-item-zodiac {
								font-size: 26rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.open_code_zone_left-item-number {
								width: 64rpx;
								height: 64rpx;
								background-color: #ccc;
								font-size: 34rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}
				}

				.mask-title-l {
					font-size: 26rpx;
					color: #333;
					font-weight: 700;
					display: flex;
					align-items: center;

					.huifang {
						background-color: #1a3d96;
						color: #fff;
						border-radius: .373rem;

						padding: 0 10rpx;
						text-align: center;
						font-size: 22rpx;
						margin-left: .107rem;
					}
				}

			}
		}

		.close {
			position: absolute;
			right: .213rem;
			top: .427rem;
			z-index: 1001;
		}
	}

	.txt {
		width: 550rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;

	}

	.videoclas {
		width: 100%;
		padding: 160rpx 0;
		background: #000;
	}

	.novideotxt {
		color: #fff;
		font-size: 20rpx;
	}

	.novideotxt222 {
		color: #ff0000;
		font-size: 20rpx;
	}

	.playvideo {
		width: 100%;
		border: 1px solid red;
	}

	.lines {
		width: 100%;
		height: 2rpx;
		border: 1px solid #ddd;
		margin: 30rpx 0;
	}

	.shijian {
		display: flex;
		align-items: center;
	}

	.shijianitem {
		padding: 10rpx 6rpx;
		border: 1px solid #8c8585;
		margin-right: 4rpx;
		font-size: 50rpx;
	}

	.shijianitem22 {
		padding: 10rpx 6rpx;
		margin-right: 4rpx;
		font-size: 50rpx;
	}

	.jzsj {
		font-size: 30rpx;
	}
</style>